<template>
	<view class="center">
		<view class="bg center">
			<view class="logo" @click="goLogin">
				<image class="logo-img" :src="avatarUrl"></image>
				<!-- <image class="logo-img" :src="login ? uerInfo.avatarUrl :avatarUrl"></image> -->
				<view class="logo-title">
					<text class="uer-name">Hi，{{isLogin ? userInfoObj.nickName : ''}}</text> 
				</view>
			</view> 
		</view> 
		<view class="center-list">
			<view class="center-list-item border-bottom" @click="goChangePwd">
				<text class="list-icon color-1">&#xe60e;</text>
				<text class="list-text">帐号管理</text> 
			</view>
			<view class="center-list-item">
				<text class="list-icon color-2">&#xe60b;</text>
				<text class="list-text">我要留言</text> 
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon color-3">&#xe60c;</text>
				<text class="list-text">帮助与反馈</text> 
			</view>
			<view class="center-list-item">
				<text class="list-icon color-4">&#xe60c;</text>
				<text class="list-text">服务条款及隐私</text> 
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<text class="list-icon color-1">&#xe60d;</text>
				<text class="list-text">关于应用</text> 
			</view>
		</view> 
		<uv-button type="primary" class="login_btn" color="linear-gradient(to bottom left, #6440FE 0%, #3582F8 100%" text="退出登录" @click="logout"></uv-button> 
		
		<custom-tabBar></custom-tabBar>
	</view>
</template>
  
<script>
import { getInfo } from '@/request/index';
import store from '@/store';
export default {
	computed: {
		userInfoObj() {
			return store.state.user.userInfoObj;
		},
		isLogin() {
			return store.state.user.isLogin;
		}
	},
	data() {
		return {
			login: false,
			avatarUrl: require("../../static/my/logo.png"),
			uerInfo: {
				nickName: ""
			},  
		}
	},  
	onShow() {
		console.log(this.userInfoObj)
		// this.getUserInfo();
	}, 
	methods: {
		goChangePwd(){
			uni.navigateTo({
				url: '/pages/my/changePassword'
			});
		},
		logout(){ 
			store.dispatch('LogOut').then(() => {
                uni.navigateTo({
                    url: '/',
                });
				uni.removeStorageSync('tabbarList');
            });
		},
		getUserInfo(){ 
			let _this = this;
			getInfo().then(res => {
                const data = res.data;
                if (res.code == 200 && data.user != null) {
                    // const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
                    console.log(data.user,"data.user.userName");  
					_this.login = true;
					_this.uerInfo = data.user;
                } else { 

                }

            }).catch(error => { 
            })
			
		},
		goLogin() {
			if (!this.login) {
				console.log("点击前往登录")
			}
		}
	}
}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_6debofuo8gh.ttf?t=1701960489041') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f4f4f4;
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color:linear-gradient(to bottom left, #6440FE 0%, #3582F8 100%);
	// $head-color:#FFCC66;
	$white-color:#fff;
	$radius:5rpx;
	$border-color:#efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height:100rpx;
	$list-margin:20rpx;
	.bg{
		background: $head-color;
		min-height: 610rpx;
		border-bottom-left-radius:30% ;
		border-bottom-right-radius:30% ;
		
		.logo {
			width: 100vw;
			padding: 180rpx 50rpx 35rpx;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			
			.logo-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 150rpx;
			}
			
			.logo-title {
				height: 150rpx;
				flex: 1;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				margin-left: 20rpx;
				
				.uer-name {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					color: #FFFFFF;
				}
				
				.go-login.navigat-arrow {
					font-size: 38rpx;
					color: #FFFFFF;
				}
			}
		}
		.logo-hover {
			opacity: 0.8;
		}
		.login-title {
			height: 150rpx;
			align-items: self-start;
			justify-content: center;
			flex-direction: column;
			margin-left: 20rpx;
		}
		
		.count{
			margin:0rpx auto 0rpx;
			width: calc(100vw - 100rpx);
			.count-item{
				flex-direction: column;
				flex:1;
				text-align: center;
				
				.count-item-num{
					color:$white-color;
					font-size:36rpx;
					font-weight: 500;
				}
				.count-item-text{
					color:$white-color;
					font-size:28rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}
	.center-list {
		background-color: #FFFFFF;
		margin:0 auto $list-margin;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		border-radius: $radius;
		position: relative;
		top: -190rpx;
	
		.center-list-item {
			height: $list-item-height;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			padding: 0rpx 20rpx;
			
			.list-icon {
				width: 40rpx;
				height: $list-item-height;
				line-height: $list-item-height;
				font-size: 45rpx;
				color: #4cd964;
				text-align: center;
				font-family: texticons;
				margin-right: 20rpx;
			}
			.color-1{
				color:$color-1;
			}
			.color-2{
				color:$color-2;
			}
			.color-3{
				color:$color-3;
			}
			.color-4{
				color:$color-4;
			}
			
			.list-text {
				height: $list-item-height;
				line-height: $list-item-height;
				font-size: 32rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}
			
			.navigat-arrow {
				height: $list-item-height;
				line-height: $list-item-height;
				width: 40rpx;
				font-size: 30rpx;
				color: #999;
				text-align: right;
				font-family: texticons;
			}
		}
		.border-bottom {
			border-bottom-width: 1rpx;
			border-color: $border-color;
			border-bottom-style: solid;
		}
	}
	.center-nav{
		background-color: #FFFFFF;
		margin:0rpx auto $list-margin;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		border-radius: $radius;
		
		.center-nav-title{
			padding:25rpx 30rpx;
			font-size:34rpx;
			color:#333;
			font-weight: 400;
			border-bottom: solid 1rpx $border-color;
		}
		.center-nav-content{
			height: 180rpx;
			display: flex;
			align-items: center;
			.center-nav-item{
				flex-direction: column;
				flex:1;
				text-align: center;
				
				.center-nav-item-icon{
					color:#333;
					font-size:48rpx;
					font-weight: 500;
					font-family: texticons;
				}
				.center-nav-item-text{
					color:#666;
					font-size:30rpx;
					font-weight: 400;
					margin-top: 15rpx;
				}
			}
		}
	}
	.margin-top{
		margin-top: -190rpx;
		min-height: 230rpx;
	}
	.login_btn{
		margin: 0 2rem;
	}
</style>